<template>
  <div class="dy-box">
    <div>
      <div class="dy-header">
        <div></div>
        <p>{{dy_list.channel_info.name}}</p>
      </div>
      <div class="type2" v-if="dy_list.channel_info.type==1">
        <Teacher1 :dy_list="dy_list"></Teacher1>
      </div>
      <div class="type2" v-if="dy_list.channel_info.type==2">
        <Teacher1 :dy_list="dy_list"></Teacher1>
      </div>
      <div v-if="dy_list.channel_info.type==3">
        <Teacher2 :dy_list="dy_list"></Teacher2>
      </div>
      <div v-if="dy_list.channel_info.type==4">
        <Teacher2 :dy_list="dy_list"></Teacher2>
      </div>
    </div>

    <!-- <div class="dy-img">
      <div class="dy-header">
        <div></div>
        <p>{{dy_list[1].channel_info.name}}</p>
      </div>
      <ul class="dy-ul1">
        <li v-for="(v,i) in dy_list[1].list" :key="i" class="dy-li1" @click="jump(v.id)">
          <div v-for="(a,b) in v.teachers_list" :key="b" class="dy-div1">
            <p>{{v.title}}</p>
            <p>共一课时</p>
            <div class="dy-twz">
              <img :src="a.teacher_avatar" alt />
              <p>{{a.teacher_name}}</p>
            </div>
            <p>
              <span>{{a.course_basis_id}}人已报名</span>
              <span style="color:green">免费</span>
            </p>
          </div>
        </li>
      </ul>
    </div>-->

    <!-- <div class="dy-img1">
      <div class="dy-header">
        <div></div>
        <p>{{dy_list[3].channel_info.name}}</p>
      </div>
       <ul class="dy-ul1">
        <li v-for="(v,i) in dy_list[3].list" :key="i" class="dy-li1"  @click="jump(v.id)">
          <div v-for="(a,b) in v.teachers_list" :key="b" class="dy-div1">
            <p>{{v.title}}</p>
            <p>共一课时</p>
            <div class="dy-twz">
              <img :src="a.teacher_avatar" alt />
              <p>{{a.teacher_name}}</p>
            </div>
            <p>
              <span>{{a.course_basis_id}}人已报名</span>
              <span style="color:green">免费</span>
            </p>
          </div>
        </li>
      </ul>
    </div>-->

    <!-- <div class="dy-img2">
      <div class="dy-header">
        <div></div>
        <p>{{dy_list[0].channel_info.name}}</p>
      </div>
      <ul class="dy-ul">
        <li v-for="(v,i) in dy_list[0].list" :key="i" class="dy-li">
          <div class="dy-div">
            <img :src="v.teacher_avatar" alt />
            <div class="dy-te">
              <p>{{v.teacher_name}}</p>
              <p>1{{v.introduction}}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>-->
  </div>
</template>

<script>
import Teacher1 from './Teacher1'
import Teacher2 from './Teacher2'
export default {
  name: "",
  data() {
    return {
      name: ""
    };
  },
  props: ["dy_list"],
  components: {
    Teacher1,
    Teacher2
  },
  mounted() {},
  methods: {
    jump(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id
        }
      });
    }
  }
};
</script>

<style scoped>
.dy-box {
  margin-top: 70px;
}
.dy-header {
  width: 100%;
  /* background: violet; */
  height: 50px;
  display: flex;
  align-items: center;
}
.dy-header > div {
  background: orange;
  width: 5px;
  height: 20px;
  margin-left: 20px;
}
.dy-header > p {
  font-size: 16px;
  margin-left: 10px;
}
.dy-div {
  display: flex;
  align-items: center;
}
.dy-ul {
  width: 100%;
}
.dy-li {
  background: #fff;
  width: 93%;
  padding: 15px 0;
  margin-top: 10px;
  margin-left: 10px;
  border-radius: 5px;
}
.dy-div > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: 20px;
}
.dy-div > div {
  margin-left: 10px;
}
.dy-div > div > p:nth-of-type(1) {
  font-size: 16px;
}

</style>